<template>
  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'ScrollBar'
})
export default class ScrollBar extends Vue {
  private top: number = 62
  private baseTop: number = 62 // 定义初始化得值判断用
  private handleScroll (e) {
    e.preventDefault()
    // @ts-ignore: Unreachable code error
    const $container = this.$refs.scrollContainer
    // @ts-ignore: Unreachable code error
    const $containerHeight = $container.offsetHeight
    // @ts-ignore: Unreachable code error
    const $wrapper = this.$refs.scrollWrapper
    // @ts-ignore: Unreachable code error
    const $wrapperHeight = $wrapper.offsetHeight
    if (e.wheelDelta > 0) {
      this.top = Math.min(this.baseTop, this.top + e.wheelDelta)
    } else {
      if ($containerHeight < $wrapperHeight) {
        if (this.top < -($wrapperHeight - $containerHeight)) {
          console.log(this.top, '====')
        } else {
          this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight)
        }
      } else {
        this.top = this.baseTop
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.scroll-container
  width 100%
  height 100%
  .scroll-wrapper
    position absolute
    width 100%
    z-index 1
    padding-bottom 40px
</style>
